import React from 'react';

import { useHistory } from 'react-router-dom';

import { connect } from 'react-redux';
import { message, Form } from 'antd';

import * as Action from 'store/login/action';
import * as AppAction from 'store/app/action';

import * as Reducer from 'store/login/reducer';
import * as Api from 'api/api';

import * as css from './css/login';
import Router from 'router/router';

function Login(props) {
  const { login, action, appAction, form } = props;
  const { getFieldDecorator, validateFields } = form;

  let history = useHistory();

  function onInputChange(payload) {
    action.setInput(payload);
  }

  function doLogin(e) {
    e.preventDefault();
    validateFields(async (err, values) => {
      if (!err) {
        const { input } = login;
        const { username, password } = input;
        const res = await Api.login({ username, password });

        if (res.status === 200) {
          message.success('登录成功');
          appAction.login({ username, token: 'token' });
          history.push('/');
        }
      }
    });
  }

//   function toRegister() {
//     history.push('/register');
//   }

  return (
    <css.Login>
      <css.Main>
        <css.Title>登录</css.Title>
        <css.Form onSubmit={doLogin}>
          <css.FormItem>
            {getFieldDecorator('input.username', {
              rules: [
                {
                  required: true,
                  message: '请输入用户名'
                }
              ]
            })(
              <css.Input
                prefix={<css.Icon type='user' />}
                placeholder='用户名'
                value={login.input.username}
                onChange={e => {
                  onInputChange({
                    [Reducer.form.username]: e.currentTarget.value
                  });
                }}
              ></css.Input>
            )}
          </css.FormItem>
          <css.FormItem>
            {getFieldDecorator('input.password', {
              rules: [
                {
                  required: true,
                  message: '请输入密码'
                }
              ]
            })(
              <css.Input
                prefix={<css.Icon type='lock' />}
                placeholder='密码'
                type='password'
                value={login.input.password}
                onChange={e => {
                  onInputChange({
                    [Reducer.form.password]: e.currentTarget.value
                  });
                }}
              ></css.Input>
            )}
          </css.FormItem>
          <css.Button type='primary' htmlType='submit' block>
            登录
          </css.Button>
          {/* <css.RegisterBlock>
            <css.RegisterText onClick={toRegister}>注册账户</css.RegisterText>
          </css.RegisterBlock> */}
        </css.Form>
      </css.Main>
    </css.Login>
  );
}

const FormLogin = Form.create({ name: 'login' })(Login);

export default connect(
  state => {
    const { login } = state;
    return {
      login
    };
  },
  f => ({
    action: {
      setInput() {
        f(Action.setInput(...arguments));
      }
    },
    appAction: {
      login() {
        f(AppAction.login(...arguments));
      }
    }
  })
)(FormLogin);
